<template>
  <el-card class="cardClass">
    <div slot="header" class="cardClass_header">
      <h3>基本设置</h3>
      <div>
         <el-button
          size="mini"
          type="success"
          icon="el-icon-plus"
          @click="open('新增购销单位')"
          >新增</el-button
        >
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="searchHidden()"
          >搜索</el-button
        >
      </div>
    </div>

    <!-- 库房tab -->
    <el-tabs
      type="border-card"
      v-model="activeName1"
      @tab-click="handleClick"
      style="min-height: calc(100vh - 200px)"
      ref="tabRef"
    >
      <el-tab-pane label="物资周转日设定" name="1">
        <!-- 表格开始 -->
        <el-table
          :data="tableData1"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="a"
            label="饲料（仅配方）"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="b"
            label="药品"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="c"
            label="精液（配种）"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="仓库信息" name="2">
        <!-- 表格开始 -->
        <el-table
          :data="tableData2"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="a"
            label="仓库名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="b"
            label="仓库类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="c"
            label="仓库状态"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="饲料信息" name="3">
        <!-- 表格开始 -->
        <el-table
          :data="tableData3"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="a"
            label="饲料名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="b"
            label="饲料编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="c"
            label="饲料分类"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="d"
            label="当前库存"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="e"
            label="安全库存"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="f"
            label="最大库存"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="药品信息" name="4">
        <!-- 表格开始 -->
        <el-table
          :data="tableData4"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="a"
            label="药品编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="b"
            label="药品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="c"
            label="药品类别"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="d"
            label="拼音简码"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="e"
            label="用法"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="f"
            label="备注"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="耗材信息" name="5">
        <!-- 表格开始 -->
        <el-table
          :data="tableData5"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="a"
            label="耗材代号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="b"
            label="耗材名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="c"
            label="耗材类别"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="d"
            label="拼音简码"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="精液信息" name="6">
        <!-- 表格开始 -->
        <el-table
          :data="tableData6"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="a"
            label="精液名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="b"
            label="公牛编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="c"
            label="拼音简码"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="购销单位管理" name="7">
        <!-- 查询 -->
        <el-collapse-transition>
          <el-form
            :model="ruleForm"
            :inline="true"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            v-if="hidden"
          >
            <el-form-item label="字段：" prop="key">
              <el-select
                v-model="ruleForm.key"
                placeholder="请选择查询字段"
                size="small"
              >
                <el-option
                  v-for="item in keyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="值：" prop="value">
              <el-input
                v-model="ruleForm.value"
                placeholder="请输入值"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                size="small"
                icon="el-icon-search"
                >查询</el-button
              >
              <el-button
                @click="resetForm('ruleForm')"
                size="small"
                icon="el-icon-refresh"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-collapse-transition>
        <!-- 表格开始 -->
        <el-table
          :data="tableData7"
          stripe
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="gouxiaoshangmingcheng"
            label="购销商名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="gouxiangshangbianhao"
            label="购销商编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="gouxiangshangwuzi"
            label="购销商物资"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lianxiren"
            label="联系人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dianhua"
            label="联系电话"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-edit"
                @click="open('修改购销单位', scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          
          :total="20"
          :page-size="10"
          :current-page="1"
          class="pageClass"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <addbasicSettings ref="addbasicSettingsRef"></addbasicSettings>
  </el-card>
</template>
  
<script>
import {
  querybasicsettings,
  deletebasicsettings,
} from "@/apis/material/basicSettings.js";
import addbasicSettings from '@/components/material/addbasicSettings.vue'
export default {
  name: "storeManagement",
  components: {addbasicSettings},
  data() {
    return {
      total: null, // 分页
      loading: true, // 加载
      activeName1: "7",
      tableHidden: true, // 延迟表格加载
      hidden: false, // 控制搜索表单显示状态
      tableData1: [
        {
          a: "青绿饲料",
          b: "牛康",
          c: "秦川牛",
        },
        {
          a: "粗饲料",
          b: "阿托品",
          c: "短角牛",
        },
        {
          a: "蛋白饲料",
          b: "粗皮质激素",
          c: "秦川牛",
        },
        {
          a: "能量饲料",
          b: "抗微生物类药",
          c: "短角牛",
        },
        {
          a: "精饲料",
          b: "四环素类抗生素",
          c: "短角牛",
        },
      ],
      tableData2: [
        {
          a: "一号仓库",
          b: "饲料",
          c: "正常",
        },
        {
          a: "二号仓库",
          b: "药物",
          c: "正常",
        },
        {
          a: "三号仓库",
          b: "精液",
          c: "正常",
        },
        {
          a: "四号仓库",
          b: "耗材",
          c: "正常",
        },
      ],
      tableData3: [
        {
          a: "青绿饲料",
          b: "1-1",
          c: "类别1",
          d: "1885",
          e: "1520",
          f: "3000",
        },
        {
          a: "粗饲料",
          b: "1-2",
          c: "类别2",
          d: "3150",
          e: "2903",
          f: "3500",
        },
        {
          a: "蛋白饲料",
          b: "1-3",
          c: "类别3",
          d: "2036",
          e: "1925",
          f: "2500",
        },
        {
          a: "能量饲料",
          b: "1-4",
          c: "类别4",
          d: "2205",
          e: "2100",
          f: "2500",
        },
        {
          a: "精饲料",
          b: "1-5",
          c: "类别5",
          d: "2005",
          e: "1985",
          f: "3000",
        },
      ],
      tableData4: [
        {
          a: "1-1001",
          b: "牛康",
          c: "类别1",
          d: "nk",
          e: "一日三次",
          f: "无",
        },
        {
          a: "1-1002",
          b: "阿托品",
          c: "类别2",
          d: "atp",
          e: "一日两次",
          f: "无",
        },
        {
          a: "1-1003",
          b: "粗皮质激素",
          c: "类别3",
          d: "cpzjs",
          e: "一日三次",
          f: "无",
        },
        {
          a: "1-1004",
          b: "抗微生物类药",
          c: "类别4",
          d: "kwswly",
          e: "一日一次",
          f: "无",
        },
        {
          a: "1-1005",
          b: "四环素类抗生素",
          c: "类别5",
          d: "shslkss",
          e: "一日三次",
          f: "无",
        },
      ],
      tableData5: [
        {
          a: "2-1001",
          b: "饮水槽",
          c: "类别1",
          d: "ysc",
        },
        {
          a: "2-1002",
          b: "犊牛栏",
          c: "类别2",
          d: "dnl",
        },
        {
          a: "2-1003",
          b: "牛床垫",
          c: "类别3",
          d: "ncd",
        },
        {
          a: "2-1004",
          b: "牛体刷",
          c: "类别4",
          d: "nts",
        },
        {
          a: "2-1005",
          b: "犊牛岛",
          c: "类别5",
          d: "dnd",
        },
      ],
      tableData6: [
        {
          a: "优质精液",
          b: "1-110",
          c: "yz",
        },
        {
          a: "良质精液",
          b: "1-111",
          c: "lz",
        },
        {
          a: "优质精液",
          b: "1-112",
          c: "yz",
        },
        {
          a: "三等精液",
          b: "1-113",
          c: "sd",
        },
        {
          a: "优质精液",
          b: "1-114",
          c: "yz",
        },
      ],
      tableData7: [],
      ruleForm: {
        key: "gouxiaoshangmingcheng",
        value: "",
        flag: null,
        pageNum: 1,
        pageSize: 8,
      },
      keyOptions: [
        { value: "gouxiaoshangmingcheng", label: "供销商名称" },
        { value: "dianhua", label: "联系电话" },
      ],
      rules: {
        key: [{ required: true, message: "请选择查询字段", trigger: "blur" }],
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    handleClick(){

    },
    // 搜索隐藏
    searchHidden() {
      this.hidden = !this.hidden;
    },
    // 新增/修改弹窗
    open(title, row) {
      this.$refs.addbasicSettingsRef.show(title, row);
    },
    //搜索方法
    search() {
      const _this = this;
      _this.loading = true;
      querybasicsettings(_this.ruleForm).then((res) => {
        _this.tableData7 = res.data;
        _this.total = res.total;
        _this.loading = false;
      });
    },
    //搜索
    submitForm(formName) {
      const _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.ruleForm.pageNum = 1; // 查询重置页数
          _this.search(_this.ruleForm);
        }
      });
    },
    // 重置
    resetForm(formName) {
      let _this = this;
      this.$refs[formName].resetFields();
      this.search(_this.ruleForm);
      this.ruleForm.pageNum = 1; // 查询重置页数
    },
    // 删除
    del(row) {
      const _this = this;
      _this
        .$confirm(
          "确认删除购销单位“" + row.gouxiangshangbianhao + "”吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          deletebasicsettings(row.id).then(function (res) {
            // console.log(res);
            if (res.code === 0) {
              _this.$message({
                type: "success",
                message: "购销单位“" + row.gouxiangshangbianhao + "”" + res.msg,
              });
              _this.search();
              _this.ruleForm.pageNum = 1; // 查询重置页数
            } else {
              _this.$message({
                type: "error",
                message: "购销单位“" + row.gouxiangshangbianhao + "”" + res.msg,
              });
            }
          });
        })
        .catch(() => {});
    },
    // 分页
    changePage(pageNum) {
      this.ruleForm.pageNum = pageNum;
      this.search();
    },
  },
};
</script>
  
<style scoped>
.table_top {
  display: flex;
  margin-bottom: 14px;
}

.table_top_inside {
  display: flex;
  align-items: center;
  margin: 0 25px 0 0;
}

.table_top_btn {
  margin-left: auto;
}

.table_top span {
  min-width: 50px;
}

/deep/ .el-card__body,
.el-main {
  padding: 16px;
}

.pageClass {
  float: right;
  margin: 15px 0px 5px;
}
</style>